<template>
  <div>
    <!-- 商品列表 -->
    <h3 class="commend">买手推荐</h3>
    <ul class="commend_list">
      <li>
        <a href="#">
          <img
            class="clearfix"
            src="http://qiniu.freshfresh.com/odoo_croped_ff_app_3_0_20191126144924_3a188b.jpg?imageView2/2/w/200/q/100"
            alt
          />
        </a>
        <div class="des clearfix">
          <a data-id="18789" data-index="0" href="#">
            <p class="des_title">不套袋不打蜡，评价说“糖心肉眼可见”！</p>
            <p class="des_info">B级-新疆阿克苏冰糖心苹果 4个装</p>
            <p class="des_now_m">￥19.90</p>
          </a>
          <div class="add_cart">加入购物车</div>
        </div>
      </li>
      <li v-for="item in 18" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
    // 商品列表
.commend {
  background: #f8f6f7;
  margin-top: 0.2rem;
  border-bottom: 0.02rem solid #dedcdd;
  color: #333;
  font-size: 0.26rem;
  height: 1rem;
  line-height: 1rem;
  text-align: center;
  font-weight: 600;
}
.commend_list {
  background: #f8f6f7;
  li {
    width: 99%;
    height: 2.4rem;
    overflow: hidden;
    padding-left: 1%;
    position: relative;
    border-bottom: 1px solid #dedcdd;
    img {
      width: auto;
      height: 100%;
      float: left;
    }
    .des {
      float: right;
      text-align: right;
      padding: 0.2rem 0.3rem 0 0;
      width: 62%;
      height: 2.2rem;

      .des_title {
        font-size: 0.24rem;
        color: #666;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        height: 0.4rem;
        line-height: 0.4rem;
      }
      .des_info {
        font-size: 0.26rem;
        font-weight: 600;
        color: #333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        height: 0.4rem;
        line-height: 0.4rem;
      }
      .des_now_m {
        height: 0.4rem;
        color: #ff5656;
        font-size: 0.36rem;
        font-weight: 600;
      }
      .add_cart {
        width: 1.8rem;
        height: 0.5rem;
        line-height: 0.5rem;
        // display: inline-block;
        background: #ffee3c;
        border-radius: 0.2rem;
        text-align: center;
        font-size: 0.24rem;
        float: right;
        margin-top: 0.3rem ;
      }
    }
  }
}
</style>